<template>
  <div class="all">

    <div class="W-nav">
          <span><el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              size="mini"
              >
            </el-date-picker></span>
            <span> <el-input v-model="date.uid" placeholder="请输入用户名" size="mini" width="120px"></el-input></span>
            <span><button @click="search()">搜索</button></span>

        </div>

    <div class="D-body">
    <table width="100%" cellspacing="0" border="0">
      <thead>
        <tr>
          <th v-for="(da,name) in header">{{da}}</th>
           <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="quantity.type==1"  v-for="(val,index) in list">
          <td>{{val.name}}</td>
          <td>{{val.type}}</td>
          <td>{{val.conent}}</td>
          <td>{{val.price}}</td>
          <td>{{val.time}}</td>
          <td><i @click="details(val.name)">详情</i> </td>
        </tr>
        <tr v-else>
          <td>{{val.name}}</td>
          <td>{{val.type}}</td>
          <td>{{val.conent}}</td>
          <td>{{val.price}}</td>
          <td>{{val.time}}</td>
          <td><i @click="amend(val)">修改</i></td>
        </tr>
      </tbody>
    </table>
    <div class="Page">
          <el-pagination
          background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="date.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="quantity.number">
          </el-pagination>

    </div>
    </div>
<!-- 明细 -->
    <div class="D-pop" v-show="show">
      <h3>{{dateTwo.uid}}-收入明细<i class="el-icon-circle-close" @click="cancel(0)"></i></h3>
       <el-table
          :data="listTwo"
          height="250"
          style="width: 95%;margin: auto;"
          :header-cell-style="{background:'#eef3f7',height:'30px'}"
          :cell-style="{padding:'5px 0'}"
          >
          <el-table-column
            prop="name"
            label="用户"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型"
            align="center"
            width="100"
            >
          </el-table-column>
          <el-table-column
            prop="conent"
            label="内容"
            align="center">
          </el-table-column>
          <el-table-column
          prop="price"
          label="豆"align="center"
          ></el-table-column>
          <el-table-column
          prop="time"
          label="操作时间"align="center"
          ></el-table-column>
        </el-table>
        <div class="Page">
              <el-pagination
              background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="dateTwo.pageIndex"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next"
                :total="quantity1">
              </el-pagination>

        </div>
      </div>
<div class="D-pop T-acc" v-show="ShowAmend">
 <h3>修改结算记录<i class="el-icon-circle-close" @click="cancel(1)"></i></h3>
<table cellspacing="0" width="100%">
  <tbody>
    <tr>
      <th>用户名</th>
       <td>ccc</td>
    </tr>
    <tr>
      <th>支付款项</th>
      <td>5.5yuan</td>
    </tr>
    <tr><th>用户账户信息</th>
    <td>
          <tr>
            <td>支付宝:</td>
            <td></td>
          </tr>
          <tr>
            <td>开户银行:</td>
            <td></td>
          </tr>
          <tr>
            <td>开户地:</td>
            <td></td>
          </tr>
          <tr>
            <td>支行名称:</td>
            <td></td>
          </tr>
          <tr>
            <td>银行账号:</td>
            <td></td>
          </tr>
          <tr>
            <td>开户人姓名:</td>
            <td></td>
          </tr>

    </td>
    </tr>
    <tr>
      <th>状态</th>
      <td></td>
    </tr>
    <tr><th>备注</th>
    <td><el-input v-model="message.note" placeholder="请输入内容"></el-input></td>
    </tr>
  </tbody>
</table>
<button @click="cancel(1)">取消</button>
<button @click="several(message)">确定</button>
</div>


  </div>
</template>


<script>
  export default {
    data() {
      return {
        show:false,
        ShowAmend:false,
        time:'',
        date:{
        uid:'',
        time1:'',
        time2:'',
        pageIndex:1,
        pageSize:20,
        },
        dateTwo:{
        uid:'',
        pageIndex:1,
        pageSize:20,
        },
        message:{
          note:''
        }
      }
    },
    props:['list','listTwo','header','quantity','quantity1',],
    methods:{
      //搜索
     search(){
       this.date.time1=this.time[0]
        this.date.time2=this.time[1]
       this.$emit('Postdata',this.date)
     },
     //翻页
     handleSizeChange(val) {
       this.date.pageSize=val
       this.$emit('Postdata',this.date)
               },
      handleCurrentChange(val) {
        this.date.pageIndex=val
         this.$emit('Postdata',this.date)
     },
     //详细翻页
     handleSizeChange1(val) {
       this.dateTwo.pageSize=val
        this.$emit('Postdata',this.dateTwo)
               },
      handleCurrentChange1(val) {
        this.dateTwo.pageIndex=val
         this.$emit('Postdata',this.dateTwo)
     },
     //显示
     details(e){
      // this.dateTwo.uid=e
       this.$emit('Postdata',this.dateTwo)
      this.show=true
     },
     // 取消
     cancel(e){
        this.show=false
        this.ShowAmend=false
        if(e==0){
           Object.assign(this.$data.dateTwo, this.$options.data().dateTwo)
        }else{
           Object.assign(this.$data.message, this.$options.data().message)
        }
      console.log(e)
     },
     //修改
     amend(e){
       this.ShowAmend=true
       this.$emit('Postdata',e)
     },
     several(e){
       this.$emit('Submit',e)
     }
    }
  }
</script>

<style scoped>
tr{
  text-align: center;
}
button{
  float: right;
margin: 10px 10px 0 0;
}
.D-pop{
width: 48%;
position: fixed;
top: 38%;
left: 37%;
border: 1px solid #eee;
}
td{
  border-bottom: 1px solid #EBEEF5;
  padding: 5px 0;
  text-align: center;
}
th{
  background: rgb(238, 243, 247);
      height: 30px;
}
.D-pop .Page{
  width: 300px;
  margin: 0 0 0 35px;
}
.el-table__row td{
  padding: 5px 0;
}
.T-acc th{
  text-align: right;
  background-color: #fff;
  width: 120px;
  border-bottom: 1px solid #EBEEF5;
  font-weight: normal;
  padding: 5px 0;
}
.T-acc td{
  text-align: left;
  padding-left: 10px;
}
</style>
